<template>
  <div class="RepairsFacility">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item
              label="设备编号"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16, offset: 1 }"
            >
              <a-input
                placeholder="请输入设备编号"
                v-decorator="[
            'facilityId',
            {rules: [{ required: true, message: '请输入算法名称!' }]}
          ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="代理商名称"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 16, offset: 1}"
            >
              <a-input
                placeholder="请输入姓名/昵称"
                v-decorator="[
          'facilityName',
          {rules: [{ required: true, message: '请输入代理商名称!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="处理状态"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16, offset: 1 }"
            >
              <a-select
                v-decorator="[
          'disposeStatus',
          {rules: [{ required: true, message: '请选择处理状态!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option
                  v-for="item in handle"
                  :key="item.id"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item
              label="报修时间"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16, offset: 1 }"
            >
              <a-range-picker
                style="width:100%"
                v-decorator="['rangeConfig', rangeConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="问题模块"
              has-feedback
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16, offset: 1 }"
            >
              <a-select
                style="width:100%"
                v-decorator="[
          'issueModule',
          {rules: [{ required: true, message: '请选择问题模块!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option
                  v-for="item in question"
                  :key="item.id"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" style="text-align:right;">
            <a-button type="primary" @click="search()">查询</a-button>
            <a-button type="dashed" @click="eduvc()">导出</a-button>
            <a-button htmlType="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card style="margin-top:2%">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.repairId"
      >
        <span slot="customTitle">设备编号</span>

        <template slot="operate" slot-scope="text,record">
          <div>
            <span class="repaired" slot="xiu" @click="showModal(text,record)">
                {{ record.handleStatus==1? "已修好":"未修好"  }}
              </span>
            <span class="details" @click="showDetails(text,record)">详情</span>
          </div>
          
        </template>
        <template slot="repaireStatus" slot-scope="text,record">
          <span>{{ record.failureModule==1? "相机模块":"门锁模块"}}</span>
        </template>

        <template slot="zhuangtai" slot-scope="text,record">
          <span>{{ record.handleStatus==1? "已处理":"故障中"}}</span>
        </template>
        <!-- 详情的弹出层 -->

        <!-- 详情的弹出层 -->
      </a-table>
    </a-card>
    <!-- //遮挡层的修改状态 -->
    <a-modal
      title="修改状态"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
      <a-form-item label="处理结果" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-textarea
          v-model="content"
          style="width:100%;height:200px"
          placeholder="请输入"
          :autosize="{ minRows: 2, maxRows: 6 }"
        />
      </a-form-item>
    </a-modal>
    <!-- /遮挡层的修改状态 -->
    <a-modal
      title="查看详情"
      :visible="visibleDetails"
      @ok="DetailsOk"
      @cancel="DetailsCancel"
      v-model="visibleDetails"
      :footer="null"
    >
      <a-form>
        <a-form-item label="设备编号" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ devCode }}</span>
        </a-form-item>
        <a-form-item label="代理商名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ agentName }}</span>
        </a-form-item>
        <a-form-item label="点位名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ posName }}</span>
        </a-form-item>
        <a-form-item label="点位地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ posAddress }}</span>
        </a-form-item>
        <a-form-item label="问题模块" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ failureModuleName }}</span>
        </a-form-item>
        <a-form-item label="问题描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ description }}</span>
        </a-form-item>
        <a-form-item label="处理结果" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <span>{{ msg }}</span>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import leftmenu from  "../../components/Leftmenu"
import moment from "moment";
const columns = [
  {
    dataIndex: "devCode",
    key: "facilityID",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "facilityID" }
  },
  {
    title: "问题模块",
    dataIndex: "failureModule",
    key: "problem",
    scopedSlots: { customRender: "repaireStatus" }
  },
  {
    title: "所属代理商",
    dataIndex: "agentName",
    key: "agentName"
  },
  {
    title: "联系方式",
    key: "contact",
    dataIndex: "contactPhone"
  },
  {
    title: "处理状态",
    key: "disposeStatus",
    dataIndex: "handleStatus",
    scopedSlots: { customRender: "zhuangtai" }
  },
  {
    title: "报修时间",
    dataIndex: "repairTime",
    key: "repairsTime"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operate" },
    key: "operate"
  }
];
const data = [
  {
    key: "1"
    // facilityID: "1234",
    // problem: "口水娃玉米味烤肠袋装50g",
    // disposeStatus: "",
    // contact: "6935768936138",
    // aisleNum: "零食",
    // repairsTime: "2019/02/13 12:23:!2"
  }
];
export default {
  name: "RepairsFacility",
  data() {
    return {
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      form: this.$form.createForm(this),
      data: [],
      columns,
      visible: false,
      visibleDetails: false,
      //问题模块
      question: [],
      //处理状态
      handle: [],
      devCode: "",
      agentName: "",
      description: "",
      posName: "",
      posAddress: "",
      failureModuleName: "",
      content: "",
      msg:"",
      // handleStatusName:'',
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 5,
        defaultCurrent: 5,
        current: 1,
        total: 500
      }
    };
  },
  components: {
    leftmenu
  },
  methods: {
    handleMenuClick(e) {
      console.log("click", e);
    },
    moment,
    onChange(dates, dateStrings) {
      console.log("From: ", dates[0], ", to: ", dates[1]);
      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
    },
    showModal(text, record) {
      this.visible = true;
      this.repairsDetailId = record.repairId;
     
    },
    handleOk(e) {

           this.visible = false;
            this.changehandle();
      // setTimeout(() => {
      //   this.visible = false;
      // }, 2000);
      // console.log(this.content);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    //点击详情的时候
    showDetails(text, record) {
      console.log(record);
      this.visibleDetails = true;
      this.repairsDetailId = record.repairId;
      // //调用详情的接口
      this.repairsDetail();
    },
    DetailsOk(e) {
      this.visibleDetails = false;
    },
    DetailsCancel(e) {
      this.visibleDetails = false;
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
    },
    //列表初始化
    listInit() {
      this.axios
        .post(this.baseUrl + "/device/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          // this.activateSelect = response.data.data.active;
          // this.configAgentSelect = response.data.data.configAgent;
          // this.onlineSelect = response.data.data.online;
          //问题
          this.question = response.data.data.question;
          //处理状态
          this.handle = response.data.data.handle;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //列表初始化

    //查询设备列表
    search() {
      var values = this.form.getFieldsValue();
      // console.log(values);
      //对时间进行判断一下
      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startTime = moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      // console.log(this.startTime);
      this.axios
        .post(this.baseUrl + "/device/findRepairListByCondition", {
          // agentIds
          agentIds: [],
          loginToken: this.$store.state.loginToken,
          //设备编号
          devCode: values.facilityId,
          //代理商名称
          agentName: values.facilityName,
          //处理状态
          handleStatus: values.disposeStatus,
          //问题模块
          failureModule: values.issueModule,

          startTime: this.startTime,
          //保修时间
          endTime: this.endTime,

          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        .then(response => {
          console.log(response.data);
          this.data = response.data.data.list;
          this.pagination.current = response.data.data.pageNum;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.total = response.data.data.pages;
        })
        .catch(erro => {
          console.log(erro);
        });
    },
    // //导出设备
    eduvc() {
      var values = this.form.getFieldsValue();
      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startTime = moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(
          this.baseUrl + "/device/exportRepair",
          {
            agentIds: [],
            loginToken: this.$store.state.loginToken,
            //设备编号
            devCode: values.facilityId,
            //代理商名称
            agentName: values.facilityName,
            failureModule: values.issueModule,
            handleStatus: values.disposeStatus,
            startTime: this.startTime,
            endTime: this.endTime
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
           if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "报修设备表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //导出设备

    // 保修设备想详情接口
    repairsDetail() {
      this.axios
        .post(this.baseUrl + "/device/repairDetail", {
          loginToken: this.$store.state.loginToken,
          id: this.repairsDetailId
        })
        .then(response => {
          console.log(response);
          this.devCode = response.data.data.devCode;
          //代理商名称
          this.agentName = response.data.data.agentName;
          //  //问题描述
          this.description = response.data.data.description;
          //点位名称
          this.posName = response.data.data.posName;
          //点位地址
          this.posAddress = response.data.data.posAddress;
          // 问题模块
          this.failureModuleName = response.data.data.failureModuleName;
          // 处理结果
          // this.handleStatusName=response.data.data.handleStatusName
          this.msg=response.data.msg;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //修改状态的接口
    changehandle() {
      this.axios
        .post(this.baseUrl + "/device/updateHandleStatus", {
          loginToken: this.$store.state.loginToken,
          id: this.repairsDetailId
        })
        .then(response => {
          console.log(response.data);
           if (response.data.code == 0) {
            this.$message.info(response.data.msg);
            this.search();
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },

  //保修设备接口
  created() {
    this.listInit();
    this.search();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.RepairsFacility {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
.repaired,
.details {
  color: rgb(0, 85, 255);
}
</style>
